<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0">
		<!-- 设置字符编码集为国际编码 -->
		<meta charset="utf-8">
		<!-- IE兼容模式 通知 IE 采用其所支持的最新的模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<!-- 360,qq浏览器等多核浏览器，优先采用webkit -->
		<meta name="renderer" content="webkit">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<!-- 引入 Bootstrap -->
		<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
		
		<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
		<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
		<!--[if lt IE 9]>
			 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
		<![endif]-->
		
		<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
		<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
		<!-- 包括所有已编译的插件 -->
		<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		
		<style>
			.w30{width: 30px}
		</style>
	</head>
  <body>
	  	
	  	<div style="border:1px solid #999 ;width: 98%;float: left;margin-left: 1%;">
	  		<table id="table"
	  			data-initable='yes'
	  			   data-height="660"
	  			    class="table table-bordered table-bordered table-striped">
		  		<caption>caption</caption>
		  		<thead>
		  			<tr>
			  			<th colspan="5"><button id="bu" class="btn" type="button">button</button></th>
			  		</tr>
		  			<tr>
			  			<th class="w30"><input type="checkbox" id="abc" onclick="abc(this);" /></th>
			  			<th>Header</th>
			  			<th>Header</th>
			  			<th>Header</th>
			  			<th>Header</th>
			  		</tr>
		  		</thead>
		  		<tbody>
		  			
		  		</tbody>
		  		<tfoot>
		  			<tr>
			  			<td><input type="checkbox" /></td>
			  			<td>tfoot1</td>
			  			<td>tfoot2</td>
			  			<td>tfoot3</td>
			  			<td>tfoot4</td>
			  		</tr>
		  		</tfoot>
	  		</table>
	  	</div>
  </body>
  <script type="text/javascript" src="tableInit-0.8.js" ></script>
  <script>
  	
  	;(function(win, $){
		var TableTrExpand = function(options){
			this.config = $.extend(true, {}, TableTrExpand.DEFAULTS, options);
			this._events();
			return this;
		}
		
		TableTrExpand.DEFAULTS = {
			id: '',
			expandTrClass: 'tr-panel',
			colspan: 30,
			loadUrl: '',
			attrArr: ['a','b'],
			eventsWidthSynFuc: null,
			callback: null
		}
		
		TableTrExpand.prototype = {
			_events: function(){
				var _this_ = this;
				var id = _this_.config.id;
				var expandTrClass = _this_.config.expandTrClass;
				var colspan = _this_.config.colspan;
				var loadUrl = _this_.config.loadUrl;
				// var data = '';
				var callback = _this_.config.callback;
				$(document).off('click.expand', "#"+ id +">tbody>tr:not('."+ expandTrClass +"')");
				$(document).on('click.expand', "#"+ id +">tbody>tr:not('."+ expandTrClass +"')", function(){
		  			var _this = $(this);
		  			if(_this.find(td).length <= 1){return}
		  			var nextDom = _this.next();
		  			if(nextDom.hasClass(expandTrClass)){
		  				nextDom.siblings('tr.' + expandTrClass).remove();
		  				if(nextDom.get(0).style.display == 'none'){
		  					nextDom.show();
		  				}else{
		  					nextDom.hide()
		  				}
		  			}else{
		  				_this.siblings('tr.' + expandTrClass).remove()
		  				var trDom = $("<tr class='"+ expandTrClass +"'><td colspan='"+ colspan +"'></td></tr>");
		  				$(this).after(trDom);
		  				var data = _this_._getDataParm(_this);
		  				trDom.find('td').load(loadUrl, data, callback);
		  			}
		  			_this_.config.eventsWidthSynFuc && _this_.config.eventsWidthSynFuc(); 
		  		});
			},
			_getDataParm: function(jdom){
				if(this.config.attrArr.length){
					var parm = {};
					this.config.attrArr.forEach(function(item, index){
						parm[item] = $(jdom).attr(item);
					});
					return parm;
				}else{
					return '';
				}
			}
		}
		
		win.TableTrExpand = TableTrExpand;
	})(window, jQuery);
  	
  	
  	
  	$(function(){
  		
  		new TableTrExpand({
  			id: 'table',
  			expandTrClass: 'tr-panel',
  			loadUrl: 'temp.html',
  			attrArr: ['a','b'],
  			callback: function(){
  				console.log('callback ...')
  			}
  		});
  		
  		/*$(document).on('click', "#table tbody tr:not('.tr-panel')", function(){
  			var _this = $(this);
  			var nextDom = _this.next();
  			if(nextDom.hasClass('tr-panel')){
  				nextDom.siblings('tr.tr-panel').hide();
  				console.log('show tr ...')
  				console.log(nextDom.get(0).style.display)
  				if(nextDom.get(0).style.display == 'none'){
  					nextDom.show();
  				}else{
  					nextDom.hide()
  				}
  				return;
  			}else{
  				_this.siblings('tr.tr-panel').hide()
  				console.log('add tr ...')
  				var trDom = $("<tr class='tr-panel'><td colspan='30'></td></tr>");
  				$(this).after(trDom);
  				trDom.find('td').load('temp.html')
  			}
  			
  		});*/
  		var m = '';
  		setTimeout(function(){
  			for (var i=0;i<30;i++) {
	  			var tr ='<tr a="a_'+ i +'" b="b_'+ i +'">'+
						'	<td><input type="checkbox" /></td>'+
						'	<td class="opid">单号</td>'+
						'	<td>供应商编码</td>'+
						'	<td>供应商</td>'+
						'	<td>'+(i+1)+'</td>'+
						'</tr>';
			  	$("tbody").append(tr);
	  		}
  			m = new MaxTable($('table')); 
  			console.log(m)
  		},100);
  		/*setTimeout(function(){
  			 m.reflesh(800);
  		},3000)*/
	})
  	function abc(str) {
  		console.log(str)
  	}
  </script>
</html>